<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style type="text/css">
        a[target]{
            color: green;
        }
        p[class]{
            color: red;
        }
        a[target=a2] {
            color: blue;
        }
        a[target~=b] {
            color: yellow;
        }
        span[class^=a] {
            font-size: 20px;
            color: red;
            font-weight: bold;
        }
        h1[class$=t] {
            color: #fa4d15;
        }
    </style>
</head>
<body>
    <a href="#" target="_blank">带有target属性</a><br>
    <a href="#">带有target属性</a> <br>
    <a href="#" target="a2">带有target属性a2</a><br>
    <a href="#" target="b 2">带有target属性 我有b</a><br>
    <p class="a1">我有类哦</p>
    <p>我没有类</p>
    <span class="a1-1">我是一个文本我是a1的开头</span>
    <h1 class="test">我是一个标题</h1>
    <h1 class="test1">我是一个标题</h1>

</body>
</html>